<html>
<head>
  <title>OpenKeyVal.org - Example</title>
  <!-- https://code.google.com/p/crypto-js/ -->
  <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
  <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
  <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/tripledes.js"></script>
  <script language="javascript"><!--

    var JsonFormatter = {
        stringify: function (cipherParams) {
            // create json object with ciphertext
            var jsonObj = {
                ct: cipherParams.ciphertext.toString(CryptoJS.enc.Base64)
            };
            // optionally add iv and salt
            if (cipherParams.iv) {
                jsonObj.iv = cipherParams.iv.toString();
            }
            if (cipherParams.salt) {
                jsonObj.s = cipherParams.salt.toString();
            }
            // stringify json object
            return JSON.stringify(jsonObj);
        },

        parse: function (jsonStr) {
            // parse json string
            var jsonObj = JSON.parse(jsonStr);
            // extract ciphertext from json object, and create cipher params object
            var cipherParams = CryptoJS.lib.CipherParams.create({
                ciphertext: CryptoJS.enc.Base64.parse(jsonObj.ct)
            });
            // optionally extract iv and salt
            if (jsonObj.iv) {
                cipherParams.iv = CryptoJS.enc.Hex.parse(jsonObj.iv)
            }
            if (jsonObj.s) {
                cipherParams.salt = CryptoJS.enc.Hex.parse(jsonObj.s)
            }
            return cipherParams;
        }
    };

    var OKV_CRYPT = 'KEY';
    var OKV_APPID = 'APP';

    function OKV_onLoad() {
       OKV_CRYPT = 'key'+CryptoJS.MD5(window.location.href);
       OKV_APPID = 'app'+CryptoJS.MD5(OKV_CRYPT);
    }

    function OKV_encryptValue(plaintext) {
      var encrypted = CryptoJS.AES.encrypt(plaintext, OKV_CRYPT, { format: JsonFormatter });
      return encrypted;
    }
    
    function OKV_decryptValue(ciphertext) {
      var decrypted = CryptoJS.AES.decrypt(ciphertext, OKV_CRYPT, { format: JsonFormatter });
      return decrypted.toString(CryptoJS.enc.Utf8);
    }

  --></script>
  <!-- http://openkeyval.org/ -->
  <script src="http://cdn.openkeyval.org/statics/openkeyval.packed.js"></script>  
  <script language="javascript"><!--

    function OKV_onItemSet(p) {
      alert('saved');
    }

    function OKV_ItemSet() {
      try {
        var frm_key = document.forms['openkeyval']['key'].value;
        var frm_val = document.forms['openkeyval']['value'].value;
        var api_key = OKV_APPID+'key'+frm_key;
        var api_val = OKV_encryptValue(frm_val);
        document.forms['openkeyval']['datakey'].value = api_key;
        document.forms['openkeyval']['datavalue'].value = api_val;
        window.remoteStorage.setItem(api_key, frm_val, OKV_onItemSet);
        // window.remoteStorage.setItem(api_key, api_val, OKV_onItemSet);
      } catch (e) {
        alert(e);
      }
    }

    function OKV_onItemGet(value, key) {
      try {
        document.forms['openkeyval']['datavalue'].value = value;
        var frm_val = document.forms['openkeyval']['datavalue'].value;
        // document.forms['openkeyval']['value'].value = OKV_decryptValue(frm_val);
        alert('loaded '+key);
      } catch (e) {
        alert('Error onItemGet: '+e+' '+value);
      }
    }
    
    function OKV_ItemGet() {
      try {
        var frm_key = document.forms['openkeyval']['key'].value;
        var api_key = OKV_APPID+'key'+frm_key;
        document.forms['openkeyval']['datakey'].value = api_key;
        document.forms['openkeyval']['datavalue'].value = '';
        window.remoteStorage.getItem(api_key, OKV_onItemGet);
      } catch (e) {
        alert('Error doItemGet: '+e);
      }
    }
  
  --></script>
</head>
<body onload="OKV_onLoad()">

  <h1>OpenKeyVal.org - Example</h1>

  <hr/>

  <form name="openkeyval">
    Key:<br/>
    <input type="text" name="key" value="text123"/><br/>
    Value:<br/>
    <textarea name="value" rows="5" cols="40">Hallo Welt</textarea><br/>
    <input type="button" value="save" onclick="OKV_ItemSet()"/>
    <input type="button" value="load" onclick="OKV_ItemGet()"/>
    <br/><br/>
    Data-Key:<br/>
    <input type="text" name="datakey" value="" readonly="readonly" style="background-color:#eeeeee" size="50"/><br/>
    Data-Value:<br/>
    <textarea name="datavalue" rows="5" cols="40" readonly="readonly" style="background-color:#eeeeee"></textarea><br/>
  </form>

</body>
</html>